<template>
  <el-card class="card-carousel">
  <el-carousel  class="push" :interval="3000" arrow="always" type="card">
    <el-carousel-item v-for="item in items" :key="item.id">
      <a :href=item.link target="_blank">
        <img :src=item.img class="carousel_img">
      </a>
      <h3>{{item.title}}</h3>
    </el-carousel-item>
  </el-carousel>
  </el-card>
</template>
<script>
  export default {
    name: 'Carousel',
    data: function () {
      return {
        items: [
        {
          id: 1,
          title: 'Vue.js - 渐进式 JavaScript 框架',
          img: '../../../static/img/carousel/vue.png',
          link: 'https://cn.vuejs.org/'
        },
        {
          id: 2,
          title: 'element-ui - 网站快速成型工具',
          img: '../../../static/img/carousel/element.png',
          link: 'https://element-cn.eleme.io/#/zh-CN'
        },
        {
          id: 3,
          title: 'Spring-Boot-Plus',
          img: '../../../static/img/carousel/springboot.png',
          link: 'http://springboot.plus/'
        }]
      }
    }
  }
</script>
<style scope>
  .el-carousel__item h3 {
    color: black;
    font-size: 15px;
    bottom: 43px;
    float: left;
    position: relative;
  }

  .card-carousel {
    width: 100%;
    height: 100%;
  }

  .el-carousel__item:nth-child(2n) {
    background: black;
  }

  .el-carousel__item:nth-child(2n+1) {
    background: black;
  }

  .carousel_img {
    height: 100%;
    width: 100%;
    text-align: center;
  }
</style>
